<template>
    <div>
        +
        <input
            class="el-date-editor"
            v-bind="$attrs"
            @focus="handleFocus"
            v-if="!ranged"
            :value="displayValue"
        />
        ++
        <div>

        </div>
    </div>
</template>

<script>
import emitter from '@/mixins/emitter';
import Popper from '@/utils/vue-popper';
const NewPopper = {
  props: {
    appendToBody: Popper.props.appendToBody,
    offset: Popper.props.offset,
    boundariesPadding: Popper.props.boundariesPadding,
    arrowOffset: Popper.props.arrowOffset
  },
  methods: Popper.methods,
  data() {
    return merge({ visibleArrow: true }, Popper.data);
  },
  beforeDestroy: Popper.beforeDestroy
};
const DEFAULT_FORMATS = {
  date: 'yyyy-MM-dd',
  month: 'yyyy-MM',
  datetime: 'yyyy-MM-dd HH:mm:ss',
  time: 'HH:mm:ss',
  week: 'yyyywWW',
  timerange: 'HH:mm:ss',
  daterange: 'yyyy-MM-dd',
  monthrange: 'yyyy-MM',
  datetimerange: 'yyyy-MM-dd HH:mm:ss',
  year: 'yyyy'
};
const HAVE_TRIGGER_TYPES = [
  'date',
  'datetime',
  'time',
  'time-select',
  'week',
  'month',
  'year',
  'daterange',
  'monthrange',
  'timerange',
  'datetimerange',
  'dates'
];
import Emitter from '@/mixins/emitter'
    export default {
        props: {
            pickOptions: {},
            value: {}
        },
        mixins: [Emitter, NewPopper],
        computed: {
          ranged() {
            return this.type.indexOf('range') > -1;
          }
        },
        watch: {
          pickerVisible(val) {
              if(val) {
                  this.showPicker();
              }
          },
          value(val, oldVal) {
            this.dispatch('ElFormItem', 'el.form.change', val);
          }
        },
        methods: {
          handleFocus() {
            this.pickerVisible = true;
            this.$emit('focus', this);
          },

          showPicker() { 
              if(!this.picker) {
                  this.mountPicker();
              }
          },

          mountPicker() {
              
          }
        }
    }
</script>

<style lang="scss" scoped>

</style>